<template>
  <div class="dashboard-container">
    <!-- 台面盒子 -->
    <div class="dashboard-text">
      <ul>
        <li
          v-for="(v, i) in list"
          :key="v._id"
          :class="v.flag ? 'active' : ''"
          @click="handOrderD(v, i)"
        >
          <div class="dt-title">{{ v.name }}</div>
          <div class="dt-status">{{ v.flag ? "已开卓" : "空闲" }}</div>
        </li>
      </ul>
    </div>
    <!-- 订单盒子 -->
    <el-drawer
      title="订单详情"
      :visible.sync="drawer"
      :direction="direction"
      size="300px"
      v-if="drawer"
    >
      <div class="order">
        <!-- 订单头部 -->
        <div class="od-head">
          <h4>一号桌</h4>
        </div>
        <!-- 订单内容 -->
        <div class="od-body">
          <ul>
            <li v-for="(v, i) in orderList" :key="i">
              <!-- 左边菜名 -->
              <div class="odb-left">{{ i + 1 }}、{{ v.name }}</div>
              <!-- 右边数量价格 -->
              <div class="odb-right">
                {{ v.price }} * {{ v.num }}
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  plain
                  circle
                  size="mini"
                  @click="ondelDisk(orderId, v.index, i)"
                ></el-button>
              </div>
            </li>
          </ul>
        </div>
        <!-- 订单结算 -->
        <div class="od-footer">
          <div class="price">金额: ￥{{ orderData.total }}</div>
          <div class="sub">
            <el-button type="danger" @click="onBuy(tid)">买单</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { getOrder, delDisk, buyDisk } from "@/api/order";
export default {
  data() {
    return {
      list: [],
      orderList: [],
      drawer: false,
      direction: "rtl",
      orderData: null,
      orderId: "",
      tid: "",
      onIndex: null, //记录点击桌台的下标
    };
  },
  mounted() {
    // 请求台桌列表
    getList()
      .then((res) => {
        this.list = res.data;
      })
      .catch((err) => {
        this.$message.error("获取楼面列表失败！！");
      });
  },
  methods: {
    // 获取订单详情
    handOrderD(v, i) {
      //开桌才显示
      if (v.order) {
        // 记录点击订单id
        this.orderId = v.order;
        // 记录点击tid
        this.tid = v._id;
        //记录点击列表下标
        this.onIndex = i;
        //请求订单详情
        getOrder({ oid: v.order })
          .then((res) => {
            //判断请求成功
            if (res.status === "success") {
              this.orderData = res.data;
              this.orderList = res.data.list;
              // 显示订单详情页面
              this.drawer = true;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 删除菜品
    ondelDisk(oid, index, idx) {
      this.$confirm("确定删除该菜品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除后端菜品
          delDisk({ oid, index: idx })
            .then((res) => {
              // 删除页面中的菜品
              this.orderData = res.data;
              this.orderList = res.data.list;
              // 提示成功
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //刷新总价
            })
            .catch((err) => {
              // 提示失败
              this.$message.error("删除失败！！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 买单
    onBuy(tid) {
      buyDisk({ tid: this.tid })
        .then((res) => {
          // 提示成功
          this.$message({
            type: "success",
            message: res.msg,
          });
          // 关闭弹出宽度
          this.drawer = false;
          // 关闭开桌可点击
          this.list[this.onIndex].flag = false;
        })
        .catch((err) => {
          // 提示失败
          this.$message.error("买单失败！！");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 解决flex嵌套中内容被撑开
::v-deep .el-drawer__body {
  min-height: 0;
}
html,
body {
  height: 100%;
}
.dashboard {
  &-container {
    padding: 30px;
    box-sizing: border-box;
    position: relative;

    // 订单盒子
    .order {
      display: flex;
      height: 100%;
      flex-direction: column;
      // 订单头部
      .od-head {
        text-align: center;
        border-bottom: 1px solid #bababa;
        height: 60px;
        line-height: 60px;
        h4 {
          margin: 0;
        }
      }
      // 订单内容
      .od-body {
        flex: 1;
        overflow-y: auto;
        ul {
          padding: 0 20px;
          margin: 0;
          // height: 530px;
          overflow-y: auto;
          li {
            display: block;
            list-style: none;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #bababa;
            // 左边菜名
            .odb-left {
              line-height: 40px;
              width: 130px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            // 右边数量价格
            .odb-right {
              line-height: 40px;
            }
          }
        }
      }
      // 订单结算
      .od-footer {
        height: 90px;
        border: 1px solid #bababa;
        padding: 2px 20px;
        div {
          margin: 8px 0;
        }
      }
    }
  }
  &-text {
    ul {
      overflow: hidden;
      li {
        float: left;
        list-style: none;
        width: 205px;
        height: 122px;
        background: #bababa;
        margin: 0 15px 15px 0;
        text-align: center;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid #304156;
        cursor: pointer;
        user-select: none;
      }
      .active {
        background: red;
      }
      .dt-title {
        font-size: 20px;
      }
    }
  }
}
</style>
